<template>
  <div ref="containerEl" class="container">
    <div v-if="isRendered" class="inner">
      <TransitionGroup appear name="fade">
        <Card
          v-for="renderCard in renderCards"
          :key="renderCard.card.cardId"
          :style="{
            ...renderCard.styles
          }"
          v-bind="renderCard.card"
        ></Card>
      </TransitionGroup>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { Desk } from '@/utils/magicdesk.ts'
import { useResizeObserver } from '@vueuse/core'
import Card from '@/components/Card.vue'
import { useRenderCards } from '@/utils/renderPokers.ts'

const desk = defineProps<Desk>()
const containerEl = ref<HTMLElement | null>(null)
const containerSize = reactive({ width: 0, height: 0 })
const isRendered = ref(false)
useResizeObserver(containerEl, (entries) => {
  const entry = entries[0]
  const { width, height } = entry.contentRect
  containerSize.width = width
  containerSize.height = height
  isRendered.value = true
})
const renderCards = useRenderCards(desk, isRendered, containerSize)
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}

.inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.fade-enter-from {
  transform: translateY(-50px);
}

.fade-leave-to {
  transform: translateY(-50px);
}
</style>
